<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p {
            text-align: center;
        }

        span {
            color: red;
        }

    </style>


</head>
<body>
<p>
    <span id="time">5</span>秒之后，自动跳转到首页...
</p>


<script>
    /*
        分析：
           1.显示页面效果  <p>
           2.倒计时读秒效果实现
               2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
               2.2 定义一个定时器，1秒执行一次该方法
           3.在方法中判断时间如果<= 0 ，则跳转到首页

     */
    // 2.倒计时读秒效果实现
    var second = 5;

    function showTime() {
        second--;
        if (second <=0) {
            location.href = "https://baidu.com";
        }
        var time = document.getElementById("time");


        time.innerHTML = second + "";
    }

    setInterval(showTime, 1000);


</script>
</body>
</html>